import { Button, Drawer, Radio, Space, Form } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import DrawerLeft from './components/DrawerLeft'
import DraweiCenter from './components/DraweiCenter'
import DraweiSettting from './components/DraweiSettting';
import { FormSetDiv } from "./style.js";
import './index.less'
const WechatPageDrawer = (props) => {
    const { visible = {}, onClose, dispatch, loading, handleCallback } = props
    const { show = false, detail = {}, type } = visible
    const { id, content } = detail
    const [data, setData] = useState({
        title: '店铺主页',
        backgroundType: "color",
        backgroundColor: '#ffffff',
        backgroundImage: "",
        backgroundRepeat: 'repeat',
        fontColor: 'black',
        list: [],
        selectIndex: null,
        active: 'components'
    })
    const { fontColor } = data
    const { title } = data
    const edit = (val) => {
        console.log(val, 'val....')
        setData({
            ...data,
            ...val,
        })
    }
    const sort = (list) => {
        console.log('sort')
        setData({
            ...data,
            list
        })
    }

    const add = (val) => {
        setData({
            ...data,
            ...val,
        })
    }
    useEffect(() => {
        if (show) {
            if (detail.id) {
                setData(detail)
            }
        } else {
            setData({
                title: '店铺主页',
                backgroundType: "color",
                backgroundColor: '#ffffff',
                backgroundImage: "",
                backgroundRepeat: 'repeat',
                fontColor: 'black',
                list: [],
                selectIndex: null,
                active: 'components'
            })
        }
    }, [show])
    const handleSubmit = () => {
        dispatch({
            type: 'wechatPage/fakeSavePageConfig',
            payload: {
                id,
                pageType: type,
                pageName: title,
                pageConfig: JSON.stringify(data)
            },
            callback: (e) => {
                handleCallback()
                onClose()
            }

        })
    }
    const drawerProps = {
        title: '退出编辑',
        placement: 'top',
        contentWrapperStyle: { overflow: 'hidden', height: "100%" },
        onClose: onClose,

        extra: <Space>
            <Button onClick={() => { onClose() }}>取消</Button>
            <Button onClick={() => {
                handleSubmit()
            }} type='primary'>保存</Button>
        </Space>,
        open: show
    }
    return (
        <div className='wechatEdit_body'>
            <Drawer
                bodyStyle={{ padding: '0px 0px', overflow: 'hidden' }}
                {...drawerProps}
            >
                <FormSetDiv>
                    <div className='WechatPage_drawer_box'>
                        <DrawerLeft
                            add={add}
                            data={data}
                            setData={setData}>
                        </DrawerLeft>
                        <DraweiCenter
                            edit={edit}
                            sort={sort}
                            data={data}
                            setData={setData}></DraweiCenter>
                        <DraweiSettting
                            edit={edit}
                            data={data}
                            setData={setData}>
                        </DraweiSettting>
                    </div>
                </FormSetDiv>
            </Drawer>
        </div>


    );
};
export default connect(({ loading }) => ({
    loading: loading.effects['wechatPage/fakeSavePageConfig']
}))(WechatPageDrawer)